<template>
  <van-popup v-model:show="props.isPopupVisible">
    <div class="container">
      <star-nav-bar :back="closePopup" title="订单" />
      <div class="payment-container">
        <div class="amount">
          <div class="countdown">交易剩余时间{{ countdown }}</div>
          <div class="number"><span>￥</span>{{ amount ? amount : '' }}</div>
        </div>
        <!-- 订单支付 -->
        <van-radio-group v-model="payMode">
          <van-cell-group inset>
            <van-cell title="微信支付" clickable @click="payMode = '1'">
              <template #icon="props">
                <van-icon name="wechat-pay" color="green" size="20" style="margin-right: 5px" />
              </template>
              <template #right-icon>
                <van-radio name="1" checked-color="#ff0000" />
              </template>
            </van-cell>
            <van-cell title="支付宝" clickable @click="payMode = '2'">
              <template #icon="props">
                <van-icon name="alipay" color="blue" size="20" style="margin-right: 5px" />
              </template>
              <template #right-icon>
                <van-radio name="2" checked-color="#ff0000" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div class="payment flex" @click="paymentClick">确认支付</div>
      </div>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import throttle from 'lodash/throttle'
import { paymentOrderAPI } from '@/api/order'
import { showToast } from 'vant'
import type { OrderDetailResult } from '@/types/order'
const props = defineProps<{
  // 弹出框是否显示
  isPopupVisible: boolean
  // 订单详情
  orderDetail: OrderDetailResult
  amount: number
  countdown: string
}>()
const emits = defineEmits<{
  (e: 'close-popup'): void
  (e: 'order-detail', data: any): void
}>()
// 关闭弹窗
const closePopup = () => {
  emits('close-popup')
}
// 支付方式 1 微信支付 2 支付宝
const payMode = ref<string>()
// 支付
const paymentClick = async () => {
  if (payMode.value === undefined) {
    showToast('请选择支付方式')
  } else {
    try {
      await paymentOrderAPI(props.orderDetail.number, +payMode.value)
      emits('order-detail', props.orderDetail.id)
      showToast('支付成功')
      closePopup()
    } catch (error) {
      console.log(error)
    }
  }
}
watch(
  props,
  throttle(() => {
    const countdownNum = Number(props.countdown)
    if (!isNaN(countdownNum) && countdownNum === 0) {
      // console.log(countdownNum)
      emits('close-popup')
    }
  }, 200),
)
</script>
<style scoped lang="scss">
.van-popup {
  height: 100%;
  min-width: 100vw;
}
.payment-container {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .countdown {
    height: 20px;
    line-height: 20px;
    margin: 10px 0;
    color: #666;
    font-size: var(--font-size-medium);
  }
  .number {
    font-size: 24px;
    font-weight: var(--text-weight);
    span {
      font-size: var(--font-size-medium);
    }
  }
}
.van-radio-group {
  margin-top: 20px;
}
.payment {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 10px;
  height: 2em;
  line-height: 2em;
  padding: 5px 10px;
  color: #fff;
  background: #000;
  border-radius: 10px;
}
</style>
